<template>
    <div>
        <div style="display: flex;flex-direction: row;justify-content: center">
            <el-input v-model="inputInfo" clearable style="width: 200px;margin-right: 10px" type="text"></el-input>
            <el-button icon="el-icon-search" size="medium" style="margin-left: 10px"
                       type="success" @click="handleReportSearch">搜索
            </el-button>
        </div>
        <div style="display: flex;align-items: center;flex-direction: column;margin-left: -25px">
            <el-table :key="centerDialogVisible"
                      :data="reports"
                      stripe
                      style="width: 90%">
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-form class="demo-table-expand" inline label-position="left">
                            <el-form-item label="报告人:">
                                <span>{{ props.row.reportPerson }}</span>
                            </el-form-item>
                            <el-form-item label="联系方式:">
                                <span>{{ props.row.personPhone }}</span>
                            </el-form-item>
                            <el-form-item label="报告时间:">
                                <span>{{ props.row.reportTime }}</span>
                            </el-form-item>
                            <el-form-item label="创建人:">
                                <span>{{ props.row.creator }}</span>
                            </el-form-item>
                            <el-form-item label="最后处理人:">
                                <span>{{ props.row.lastHandlePerson }}</span>
                            </el-form-item>
                            <el-form-item label="最后处理时间:">
                                <span>{{ props.row.lastHandleTime }}</span>
                            </el-form-item>
                            <el-form-item class="process-steps" label="流程:">
                                <el-steps :active="props.row.stepActive" :process-status="status"
                                          align-center finish-status="success">
                                    <el-step v-for="step in props.row.steps"
                                             :key="step.title"
                                             :description="step.desc"
                                             :title="step.title"></el-step>
                                </el-steps>
                            </el-form-item>
                            <div class="btnGroup">
                                <div>
                                    <el-button
                                        :disabled="props.row.reportStatus!=='审核中'"
                                        size="mini"
                                        type="primary"
                                        @click="handlePass(props.$index, props.row)">通过
                                    </el-button>
                                    <el-button
                                        :disabled="props.row.reportStatus!=='审核中'"
                                        size="mini"
                                        @click="handleEdit(props.$index, props.row)">修改
                                    </el-button>
                                    <el-button
                                        :disabled="props.row.reportStatus!=='审核中'"
                                        size="mini"
                                        type="danger"
                                        @click="handleFail(props.$index, props.row)">驳回
                                    </el-button>
                                </div>
                                <div style="display: flex;justify-content: center">
                                    <el-button :disabled="props.row.reportStatus!=='审核中'" size="medium"
                                               style="margin-top: 10px"
                                               type="success"
                                               @click="handleExpertCheck(props.row)">申请专家审核
                                    </el-button>
                                </div>
                            </div>
                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column label="ID" prop="id" width="50px"></el-table-column>
                <el-table-column label="接报编码" prop="code" width="100px"></el-table-column>
                <el-table-column label="接报名称" prop="name"></el-table-column>
                <el-table-column label="预备流程" prop="process"></el-table-column>
                <el-table-column label="企业" prop="enterprise"></el-table-column>
                <el-table-column label="接报状态" prop="reportStatus">
                    <template slot-scope="scope">
                        <el-badge is-dot>{{ scope.row.reportStatus }}</el-badge>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                :page-size="2"
                :total="paginationTotal"
                background
                layout="prev, pager, next"
                style="margin-top: 5px">
            </el-pagination>
        </div>
        <el-dialog :title="title" :visible.sync="centerDialogVisible" width="25%">
            <el-form :model="selectedStep" class="selectedStepForm">
                <el-form-item label="步骤名称:" prop="title">
                    <el-input v-model="selectedStep.title" disabled></el-input>
                </el-form-item>

                <el-form-item label="措施:" prop="desc">
                    <el-input v-model="selectedStep.desc"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                            <el-button @click="centerDialogVisible = false;">取 消</el-button>
                            <el-button type="primary" @click="handleDialogEnter">确 定</el-button>
                    </span>
        </el-dialog>
    </div>
</template>

<script>
import variables from "@/assets/variables";

export default {
    name: "ReportManagement",
    data() {
        return {
            userName: "",
            reports: [],
            title: "",
            inputInfo: "",
            centerDialogVisible: false,
            selectedStep: {},
            status: "process",
        }
    },
    methods: {
        getTimeString() {
            const now = new Date();
            const year = now.getFullYear();
            const month = now.getMonth();
            const day = now.getDate();
            return year + "-" + month + "-" + day;
        },
        handleReportSearch() {
            if (this.inputInfo === "") {
                this.reports = variables.reports;
            } else {
                this.reports = variables.reports.filter(report =>
                    report.name.includes(this.inputInfo) ||
                    report.code.includes(this.inputInfo) ||
                    report.process.includes(this.inputInfo) ||
                    report.reportPerson.includes(this.inputInfo) ||
                    report.personPhone.includes(this.inputInfo) ||
                    report.creator.includes(this.inputInfo) ||
                    report.enterprise.includes(this.inputInfo) ||
                    report.lastHandlePerson.includes(this.inputInfo) ||
                    report.lastHandleTime.includes(this.inputInfo)
                );
            }
        },
        handlePass(index, obj) {
            obj.stepActive++;
            if (obj.stepActive === obj.stepsLength) {
                obj.reportStatus = "审核通过";
                obj.lastHandlePerson = this.$route.params.name;
                obj.lastHandleTime = this.getTimeString();
            }
        },
        handleEdit(index, obj) {
            this.title = "查看";
            this.centerDialogVisible = true;
            this.selectedStep = obj.steps[obj.stepActive];
        },
        handleFail(index, row) {
            row.reportStatus = "审核未通过"
            row.lastHandlePerson = this.$route.params.name;
            row.lastHandleTime = this.getTimeString();
            this.status = "error";
        },
        handleDialogEnter() {
            if (this.title === "新增") {
                this.reports.push(this.selectedReport);
            } else {
                this.reports[this.selectedReportIndex] = this.selectedReport;
            }
            this.centerDialogVisible = false;
        },
        handleProcessChange(v) {
            this.selectedReport.process = v.join("/");
        },
        handleExpertCheck(obj) {
            obj.reportStatus = "专家审核中";
            obj.lastHandlePerson = this.$route.params.name;
            obj.lastHandleTime = this.getTimeString();
        }
    },
    computed: {
        paginationTotal() {
            return this.reports.length;
        }
    },
    mounted() {
        this.userName = this.$route.params.name
        this.reports = variables.reports;
        const process = variables.processes;
        for (let i in this.reports) {
            console.log(i);
            console.log(this.reports[i]);
            if (this.reports[i].reportStatus === "已完成"||this.reports[i].reportStatus==="进行中") {
                delete (this.reports[i]);
                continue;
            }
            this.reports[i].processT = this.reports[i].process.split("/");
            for (let j in process) {
                if (this.reports[i].process === process[j].type) {
                    this.reports[i].steps = process[j].steps;
                    this.reports[i].stepsLength = this.reports[i].steps.length;
                    break;
                }
            }
        }
    },
}
</script>

<style scoped>
.selectedReportForm {
    height: 300px;
}

.selectedReportForm >>> .el-form-item {
    display: inline-block;
    width: 260px;
    float: left;
    margin: 5px 15px;
}

.demo-table-expand {
    font-size: 0;
}

.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}

.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
}

.process-steps >>> .el-form-item__content {
    width: 100%;
}

.btnGroup {
    float: right;
    margin-right: 30%;
    margin-top: 40px;
}
</style>